<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="item in list">
                <li v-html="item.content"></li>
            </template>
        </ul>
        <button v-on:click="pre" ref="pre">上一页</button>
        <button v-on:click="next" ref="next">下一页</button>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            new Vue({
                el:"#app",
                data:{
                    list:[],
                    page:1,
                    isShow:true
                },
                mounted(){
                    // var data = {page:4}
                    this.dataList();
                    
                },
                methods:{
                    dataList(){
                        axios.get('http://api.livefor.cn/site/index',{
                            params:{
                                page:this.page
                            }
                        })
                        .then((result) => {
                            console.log(result)
                            if(result.data.code === 1){
                                this.list = this.list.concat(result.data.data);
                            }
                            
                        }).catch((err) => {
                            console.log(err);   
                        });
                    },
                    pre(){
                        this.page--;
                        if(this.page === 1){
                            // this.isShow =  false;
                            console.log(this.$refs.pre);
                            this.$refs.pre.disabled = true;
                        }
                        console.log(this.page);
                        this.list= [];
                        this.dataList();
                    },
                    next(){
                        this.page++;
                        if(this.page > 1){
                            // this.isShow =  true;
                            this.$refs.pre.disabled = false;
                        }
                        console.log(this.page);
                        this.list= [];
                        this.dataList();
                    }
                }
            })
            

            
        </script>
</body>
</html>